<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8"/>
	<title>Backbone.Marionette.js Library</title>
	<link rel="stylesheet" href="css/app.css">
	<link rel="stylesheet" href="css/screen.css">
	<link rel="stylesheet" href="css/jquery-ui-1.9.2.css">
	<link rel="stylesheet" href="css/popup.css">
	<link rel="stylesheet" href="css/demos.css">
</head>

<body>
	<!--  HOME MADE TABNAV CONTROL
			This control is a custom implementation of the navigation control Support both text
			as well as sprites images generated by the SASS compass tool. The anchor links in the
			code are services by the underlaying backbone/marionette application.  -->
	<div id="appTab" class="applicationMenu"> <!-- <<< -->
		<div id="tab01" class="applicationMenuItem applicationMenuItemIcon"> 
			<!-- This is for textual mode: would require new class "applicationMenuItemText" instead of "applicationMenuItemIcon"
      	<a href="#exit">EXIT</a>
			-->
      	<a href="#exit">
				<div class="toolbar-exit applicationMenuItemIconSubDiv"></div>
			</a>
		</div>
		<div id="tab02" class="applicationMenuItem applicationMenuItemIcon">
			<!-- This is for textual mode: would require new class "applicationMenuItemText" instead of "applicationMenuItemIcon"
			<a href="#addBook">ADD</a>
			-->
      	<a href="#addBook">
				<div class="toolbar-add applicationMenuItemIconSubDiv"></div>
			</a>
		</div>
		<div id="tab03" class="applicationMenuItem applicationMenuItemIcon">
			<!-- This is for textual mode: would require new class "applicationMenuItemText" instead of "applicationMenuItemIcon"
			<a href="#showLibrary">LIBRARY</a>
			-->
      	<a href="#showLibrary">
				<div class="toolbar-library applicationMenuItemIconSubDiv"></div>
			</a>
		</div>
		<div id="tab04" class="applicationMenuItem applicationMenuItemIcon">
			<!-- This is for textual mode: would require new class "applicationMenuItemText" instead of "applicationMenuItemIcon"
			<a href="#showLibrary">LIBRARY</a>
			-->
      	<a href="#complexView">
				<div class="toolbar-add1 applicationMenuItemIconSubDiv"></div>
			</a>
		</div>
		<div id="tab05" class="applicationMenuItem applicationMenuItemIcon applicationMenuStart"> 
			<!-- This is for textual mode: would require new class "applicationMenuItemText" instead of "applicationMenuItemIcon"
      	<a href="#exit">EXIT</a>
			-->
      	<a href="#fileMenu">
				<div class="toolbar-start applicationMenuItemIconSubDiv"></div>
			</a>
		   <div class="overallContainer">
		   	<div class="originIndicatorBox" id="secondIndicatorBox"></div>
		   	<div class="originIndicator" id="secondIndicator"></div>
		   	<div class="menuContainer" id="second">
	   	   	<ul class="popupMenu">
	      	      <a href="#addBook">
				   	   <li class="first">
				  	      	Add book
		   			   </li>
	               </a>
	      	      <a href="#showLibrary">
		   			   <li>
	                     Thumbnail View
		   			   </li>
	               </a>
	      	      <a href="#complexView">
		   		   	<li>
		   			   	Document View
		   			   </li>
	               </a>
		   		</ul>
		   	</div>
		   </div>
		</div>
	</div>
	<!-- >>> END of TABNAV controll -->

   <div class="toolBarButton" id="save_options"><br/>Save
	   <div class="overallContainer">
	   	<div class="originIndicatorBox" id="secondIndicatorBox"></div>
	   	<div class="originIndicator" id="secondIndicator"></div>
	   	<div class="menuContainer" id="second">
   	   	<ul class="popupMenu">
      	      <a href="#addBook">
			   	   <li class="first">
			  	      	Add book
	   			   </li>
               </a>
      	      <a href="#showLibrary">
	   			   <li>
                     Thumbnail View
	   			   </li>
               </a>
      	      <a href="#complexView">
	   		   	<li>
	   			   	Document View
	   			   </li>
               </a>
	   		</ul>
	   	</div>
	   </div>
   </div>

	<div id="container">
	</div>
	<div id="grid">
	</div>
	<div id="footnote">
	</div>

	<script data-main="js/app" src="js/lib/require.js"></script>
</body>
</html>
